<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="Crush it Able The most popular Admin Dashboard template and ui kit">
<meta name="author" content="PuffinTheme the theme designer">
<meta http-equiv="Content-Language" content="en">
<link rel="icon" href="~/Crushit/light/favicon.ico" type="image/x-icon"/>

<title>:: Crush it :: Documentation</title>

<!-- Bootstrap Core and Font Icon -->
<link rel="stylesheet" href="../../assets/plugins/bootstrap/css/bootstrap.min.css" />

<!-- Core css -->
<link rel="stylesheet" href="../../assets/css/main.css"/>
<link rel="stylesheet" href="../../assets/css/theme1.css"/>
</head>

<body class="font-opensans">

<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
    </div>
</div>

<!-- Start main html -->
<div id="main_content">

    <!-- Small icon top menu -->
    <div id="header_top" class="header_top">
        <div class="container">
            <div class="hleft">
                <div class="dropdown">
                    <a href="javascript:void(0)" class="nav-link user_btn"><img class="avatar" src="../../assets/images/user.png" alt=""/></a>
                    <a href="../page-search.html" class="nav-link icon"><i class="fa fa-search"></i></a>
                    <a href="../index.html" class="nav-link icon"><i class="fa fa-home"></i></a>
                    <a href="../app-email.html"  class="nav-link icon app_inbox"><i class="fa fa-envelope"></i></a>
                    <a href="../app-chat.html"  class="nav-link icon xs-hide"><i class="fa fa-comments"></i></a>
                    <a href="../app-filemanager.html"  class="nav-link icon app_file xs-hide"><i class="fa fa-folder"></i></a>
                </div>
            </div>
            <div class="hright">
                <div class="dropdown">
                    <a href="javascript:void(0)" class="nav-link icon settingbar"><i class="fa fa-bell"></i></a>
                    <a href="javascript:void(0)" class="nav-link icon menu_toggle"><i class="fa fa-navicon"></i></a>
                </div>            
            </div>
        </div>
    </div>

    <!-- Notification and  Activity-->
    <div id="rightsidebar" class="right_sidebar">
        <a href="javascript:void(0)" class="p-3 settingbar float-right"><i class="fa fa-close"></i></a>
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#notification" aria-expanded="true">Notification</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#activity" aria-expanded="false">Activity</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane   active" id="notification" aria-expanded="true">
                <ul class="list-unstyled feeds_widget">
                    <li>
                        <div class="feeds-left"><i class="fa fa-check"></i></div>
                        <div class="feeds-body">
                            <h4 class="title text-danger">Issue Fixed</h4>
                            <small>WE have fix all Design bug with Responsive</small>
                            <small class="text-muted">11:05</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-user"></i></div>
                        <div class="feeds-body">
                            <h4 class="title">New User</h4>
                            <small>I feel great! Thanks team</small>
                            <small class="text-muted">10:45</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-thumbs-o-up"></i></div>
                        <div class="feeds-body">
                            <h4 class="title">7 New Feedback</h4>
                            <small>It will give a smart finishing to your site</small>
                            <small class="text-muted">Today</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-question-circle"></i></div>
                        <div class="feeds-body">
                            <h4 class="title text-warning">Server Warning</h4>
                            <small>Your connection is not private</small>
                            <small class="text-muted">10:50</small>
                        </div>
                    </li>
                    <li>
                        <div class="feeds-left"><i class="fa fa-shopping-cart"></i></div>
                        <div class="feeds-body">
                            <h4 class="title">7 New Orders</h4>
                            <small>You received a new oder from Tina.</small>
                            <small class="text-muted">11:35</small>
                        </div>
                    </li>                                   
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane  " id="activity" aria-expanded="false">
                <ul class="new_timeline mt-3">
                    <li>
                        <div class="bullet pink"></div>
                        <div class="time">11:00am</div>
                        <div class="desc">
                            <h3>Attendance</h3>
                            <h4>Computer Class</h4>
                        </div>
                    </li>
                    <li>
                        <div class="bullet pink"></div>
                        <div class="time">11:30am</div>
                        <div class="desc">
                            <h3>Added an interest</h3>
                            <h4>“Volunteer Activities”</h4>
                        </div>
                    </li>
                    <li>
                        <div class="bullet green"></div>
                        <div class="time">12:00pm</div>
                        <div class="desc">
                            <h3>Developer Team</h3>
                            <h4>Hangouts</h4>
                            <ul class="list-unstyled team-info margin-0 p-t-5">                                            
                                <li><img src="../../assets/images/xs/avatar1.jpg" alt="Avatar"></li>
                                <li><img src="../../assets/images/xs/avatar2.jpg" alt="Avatar"></li>
                                <li><img src="../../assets/images/xs/avatar3.jpg" alt="Avatar"></li>
                                <li><img src="../../assets/images/xs/avatar4.jpg" alt="Avatar"></li>                                            
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="bullet green"></div>
                        <div class="time">2:00pm</div>
                        <div class="desc">
                            <h3>Responded to need</h3>
                            <a href="javascript:void(0)">“In-Kind Opportunity”</a>
                        </div>
                    </li>
                    <li>
                        <div class="bullet orange"></div>
                        <div class="time">1:30pm</div>
                        <div class="desc">
                            <h3>Lunch Break</h3>
                        </div>
                    </li>
                    <li>
                        <div class="bullet green"></div>
                        <div class="time">2:38pm</div>
                        <div class="desc">
                            <h3>Finish</h3>
                            <h4>Go to Home</h4>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- start User detail -->
    <div class="user_div">
        <h5 class="brand-name mb-4">User Crush<a href="javascript:void(0)" class="user_btn"><i class="icon-close"></i></a></h5>
        <div class="card">
            <img class="card-img-top" src="../../assets/images/gallery/6.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Daniel Kristeen</h5>
                <p class="card-text">795 Folsom Ave, Suite 600 San Francisco, 94107</p>
                <div class="row">
                    <div class="col-4">
                        <h6><strong>3265</strong></h6>
                        <small>Post</small>
                    </div>
                    <div class="col-4">
                        <h6><strong>1358</strong></h6>
                        <small>Followers</small>
                    </div>
                    <div class="col-4">
                        <h6><strong>10K</strong></h6>
                        <small>Likes</small>
                    </div>
                </div>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">michael@example.com</li>
                <li class="list-group-item">+ 202-555-2828</li>
                <li class="list-group-item">October 22th, 1990</li>
            </ul>
            <div class="card-body">
                <a href="javascript:void(0);" class="card-link">View More</a>
                <a href="javascript:void(0);" class="card-link">Another link</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <label class="d-block">Total Income<span class="float-right">77%</span></label>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-blue" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="d-block">Total Expenses <span class="float-right">50%</span></label>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                    </div>
                </div>
                <div class="form-group mb-0">
                    <label class="d-block">Gross Profit <span class="float-right">23%</span></label>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-green" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 23%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="d-block">Storage <span class="float-right">77%</span></label>
            <div class="progress progress-sm">
                <div class="progress-bar" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;"></div>
            </div>
            <button type="button" class="btn btn-primary btn-block mt-3">Upgrade Storage</button>
        </div>
    </div>

    <!-- start Main menu -->
    <div id="left-sidebar" class="sidebar">
        <div class="d-flex justify-content-between brand_name">
            <h5 class="brand-name">Crush it</h5>
            <div class="theme_btn">
                <a class="theme1" data-toggle="tooltip" title="Theme Radical" href="#" onclick="setStyleSheet('../assets/css/theme1.css', 0);"></a>
                <a class="theme2" data-toggle="tooltip" title="Theme Turmeric" href="#" onclick="setStyleSheet('../assets/css/theme2.css', 0);"></a>
                <a class="theme3" data-toggle="tooltip" title="Theme Caribbean" href="#" onclick="setStyleSheet('../assets/css/theme3.css', 0);"></a>
                <a class="theme4" data-toggle="tooltip" title="Theme Cascade" href="#" onclick="setStyleSheet('../assets/css/theme4.css', 0);"></a>
            </div>
        </div>
        <div class="input-icon">
            <span class="input-icon-addon">
                <i class="fe fe-search"></i>
            </span>
            <input type="text" class="form-control" placeholder="Search...">
        </div>
        <ul class="nav nav-tabs b-none">
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#all-tab"><i class="fa fa-list-ul"></i> All</a></li>
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#app-tab">Elements</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#setting-tab">Settings</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade" id="all-tab">
                <nav class="sidebar-nav">
                    <ul class="metismenu ci-effect-1">
                        <li class="g_heading">Directories</li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-home"></i><span data-hover="Dashboard">Dashboard</span></a>
                            <ul>
                                <li><a href="../index.html"><span data-hover="Web Analytics">Web Analytics</span></a></li>
                                <li><a href="../index2.html"><span data-hover="Cryptocurrency">Cryptocurrency</span></a></li>
                                <li><a href="../index3.html"><span data-hover="Sales Monitoring">Sales Monitoring</span></a></li>
                                <li><a href="../index4.html"><span data-hover="eCommerce Analytics">eCommerce Analytics</span></a></li>
                                <li><a href="../app-social.html"><span data-hover="Campaigns">Campaigns</span></a></li>
                            </ul>
                        </li>
                        <li><a href="../app-calendar.html"><i class="icon-calendar"></i><span data-hover="Calendar">Calendar</span></a></li>
                        <li><a href="../app-chat.html"><i class="icon-speech"></i><span data-hover="Chat">Chat</span></a></li>
                        <li><a href="../app-contact.html"><i class="icon-notebook"></i><span data-hover="Contact">Contact</span></a></li>
                        <li><a href="../app-blog.html"><i class="icon-globe"></i><span data-hover="Blog">Blog</span></a></li>
                        <li><a href="../app-filemanager.html"><i class="icon-folder-alt"></i><span data-hover="FileManager">File Manager</span></a></li>
                        <li><a href="../page-gallery.html"><i class="icon-picture"></i><span data-hover="Gallery">Gallery</span></a></li>
                        <li class="g_heading">Utilities</li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-tag"></i><span data-hover="Icons">Icons</span></a>
                            <ul>
                                <li><a href="../icons-feather.html"><span data-hover="Feather">Feather Icons</span></a></li>
                                <li><a href="../icons-line.html"><span data-hover="Line">Line Icons</span></a></li>
                                <li><a href="../icons-fontawesome.html"><span data-hover="FontAwesome">FontAwesome</span></a></li>
                                <li><a href="../icons-flags.html"><span data-hover="Flags">Flags Icons</span></a></li>
                                <li><a href="../icons-payments.html"><span data-hover="Payments">Payments Icons</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-bar-chart"></i><span data-hover="Charts">Charts</span></a>
                            <ul>
                                <li><a href="../charts-apex.html"><span data-hover="ChartsApex">Charts Apex</span></a></li>
                                <li><a href="../charts-e.html"><span data-hover="EChart">EChart</span></a></li>
                                <li><a href="../charts-c3.html"><span data-hover="C3Chart">C3 Chart</span></a></li>
                                <li><a href="../charts-knob.html"><span data-hover="JQueryKnob">JQuery Knob</span></a></li>
                                <li><a href="../charts-sparkline.html"><span data-hover="SparklineChart">Sparkline Chart</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-layers"></i><span data-hover="Forms">Forms</span></a>
                            <ul>
                                <li><a href="../form-elements.html"><span data-hover="BasicElements">Basic Elements</span></a></li>
                                <li><a href="../form-advanced.html"><span data-hover="AdvancedElements">Advanced Elements</span></a></li>
                                <li><a href="../form-validation.html"><span data-hover="FormValidation">Form Validation</span></a></li>
                                <li><a href="../form-wizard.html"><span data-hover="FormWizard">Form Wizard</span></a></li>
                                <li><a href="../form-summernote.html"><span data-hover="Summernote">Summernote</span></a></li>
                                
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-tag"></i><span data-hover="Tables">Tables</span></a>
                            <ul>
                                <li><a href="../table-normal.html"><span data-hover="Bootstrap">Bootstrap Table</span></a></li>
                                <li><a href="../table-datatable.html"><span data-hover="Datatable">Jquery Datatable</span></a></li>
                            </ul>
                        </li>                
                        <li><a href="../widgets.html"><i class="icon-puzzle"></i><span data-hover="Widgets">Widgets</span></a></li>
                        <li class="g_heading">Extra Pages</li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="icon-lock"></i><span data-hover="Authentication">Authentication</span></a>
                            <ul>
                                <li><a href="../login.html"><span data-hover="Login">Login</span></a></li>
                                <li><a href="../register.html"><span data-hover="Register">Register</span></a></li>
                                <li><a href="../forgot-password.html"><span data-hover="Forgot">Forgot password</span></a></li>
                                <li><a href="../404.html"><span data-hover="404">404 error</span></a></li>
                                <li><a href="../500.html"><span data-hover="500">500 error</span></a></li>   
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="has-arrow arrow-b"><i class="fe fe-file"></i><span data-hover="Pages">Pages</span></a>
                            <ul>
                                <li><a href="../page-empty.html"><span data-hover="Emptypage">Empty page</span></a></li>
                                <li><a href="../page-profile.html"><span data-hover="Profile">Profile</span></a></li>
                                <li><a href="../page-search.html"><span data-hover="SearchResults">Search Results</span></a></li>
                                <li><a href="../page-timeline.html"><span data-hover="Timeline">Timeline</span></a></li>                                
                                <li><a href="../page-invoices.html"><span data-hover="Invoices">Invoices</span></a></li>
                                <li><a href="../page-pricing.html"><span data-hover="Pricing">Pricing</span></a></li>
                                <li><a href="../page-carousel.html"><span data-hover="Carousel">Carousel</span></a></li>                        
                            </ul>
                        </li>
                        <li><a href="../page-maps.html"><i class="icon-map"></i><span data-hover="Maps">Maps</span></a></li>
                    </ul>
                </nav>
            </div>
            <div class="tab-pane fade active show" id="app-tab">
                <nav class="sidebar-nav">
                    <ul class="metismenu">
                        <li class="g_heading">Components</li>
                        <li><a href="typography.html"><i class="fe fe-type"></i><span>Typography</span></a></li>
                        <li><a href="colors.html"><i class="fe fe-feather"></i><span>Colors</span></a></li>
                        <li><a href="alerts.html"><i class="fe fe-alert-triangle"></i><span>Alerts</span></a></li>
                        <li><a href="avatars.html"><i class="fe fe-user"></i><span>Avatars</span></a></li>
                        <li><a href="buttons.html"><i class="fe fe-toggle-right"></i><span>Buttons</span></a></li>
                        <li><a href="breadcrumb.html"><i class="fe fe-link-2"></i><span>Breadcrumb</span></a></li>
                        <li><a href="forms.html"><i class="fe fe-layers"></i><span>Input group</span></a></li>
                        <li><a href="list-group.html"><i class="fe fe-list"></i><span>List group</span></a></li>
                        <li><a href="modal.html"><i class="fe fe-square"></i><span>Modal</span></a></li>
                        <li><a href="pagination.html"><i class="fe fe-file-text"></i><span>Pagination</span></a></li>
                        <li class="active"><a href="cards.html"><i class="fe fe-image"></i><span>Cards</span></a></li>
                        <li><a href="charts.html"><i class="fe fe-pie-chart"></i><span>Charts</span></a></li>
                        <li><a href="form-components.html"><i class="fe fe-check-square"></i><span>Form</span></a></li>
                        <li><a href="tags.html"><i class="fe fe-tag"></i><span>Tags</span></a></li>                        
                        <li><a href="javascript:void(0)"><i class="fe fe-help-circle"></i><span>Documentation</span></a></li>
                        <li><a href="javascript:void(0)"><i class="fe fe-life-buoy"></i><span>Changelog</span></a></li>
                    </ul>
                </nav>
            </div>
            <div class="tab-pane fade" id="setting-tab">
                <div class="mb-4 mt-3">
                    <h6 class="font-14 font-weight-bold text-muted">Font Style</h6>
                    <div class="custom-controls-stacked font_setting">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="font" value="font-opensans" checked="">
                            <span class="custom-control-label">Open Sans Font</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="font" value="font-montserrat">
                            <span class="custom-control-label">Montserrat Google Font</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="font" value="font-poppins">
                            <span class="custom-control-label">Poppins Google Font</span>
                        </label>
                    </div>
                </div>
                <div class="mb-4">
                    <h6 class="font-14 font-weight-bold text-muted">Dropdown Menu Icon</h6>
                    <div class="custom-controls-stacked arrow_option">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="marrow" value="arrow-a" checked="">
                            <span class="custom-control-label">A</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="marrow" value="arrow-b">
                            <span class="custom-control-label">B</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="marrow" value="arrow-c">
                            <span class="custom-control-label">C</span>
                        </label>
                    </div>
                    <h6 class="font-14 font-weight-bold mt-4 text-muted">SubMenu List Icon</h6>
                    <div class="custom-controls-stacked list_option">
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="listicon" value="list-a" checked="">
                            <span class="custom-control-label">A</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="listicon" value="list-b">
                            <span class="custom-control-label">B</span>
                        </label>
                        <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="listicon" value="list-c">
                            <span class="custom-control-label">C</span>
                        </label>
                    </div>
                </div>
                <div>
                    <h6 class="font-14 font-weight-bold mt-4 text-muted">General Settings</h6>
                    <ul class="setting-list list-unstyled mt-1 setting_switch">
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Night Mode</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-darkmode">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Fix Navbar top</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-fixnavbar">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Header Dark</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-pageheader">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Min Sidebar Dark</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-min_sidebar">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Sidebar Dark</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-sidebar">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Icon Color</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-iconcolor">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Gradient Color</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-gradient">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Box Shadow</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-boxshadow">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">RTL Support</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-rtl">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                        <li>
                            <label class="custom-switch">
                                <span class="custom-switch-description">Box Layout</span>
                                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input btn-boxlayout">
                                <span class="custom-switch-indicator"></span>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- start main body part-->
    <div class="page">

        <!-- start body header -->
        <div id="page_top" class="section-body">
            <div class="container-fluid">
                <div class="page-header">
                    <div class="left">
                        <h1 class="page-title">Cards</h1>
                    </div>
                    <div class="right">
                        <div class="notification d-flex">
                            <button type="button" class="btn btn-facebook"><i class="fa fa-info-circle mr-2"></i>Need Help</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-file-text mr-2"></i>Data export</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-power-off mr-2"></i>Sign Out</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Cards</h3>
                            </div>
                            <div class="card-body">
                                <p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
                                <p>The <code class="highlighter-rouge">.card</code> element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.</p>
                                <div class="example example-bg">
                                    <div class="example-column example-column-1">
                                        <div class="card">
                                            <div class="card-header">
                                            <h3 class="card-title">Card title</h3>
                                            </div>
                                            <div class="card-body">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Advanced card</h3>
                            </div>
                            <div class="card-body">
                                <div class="example example-bg">
                                    <div class="example-column example-column-1">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Card title</h3>
                                                <div class="card-options">
                                                    <a href="#" class="btn btn-primary btn-sm">Action 1</a>
                                                    <a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
                                            </div>
                                            <div class="card-footer">
                                                This is standard card footer
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-options"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Action 1<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm ml-2"</span><span class="nt">&gt;</span>Action 2<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">&gt;</span>
        This is standard card footer
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Blog post card</h3>
                            </div>
                            <div class="card-body">
                                <p>The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the <code class="highlighter-rouge">.card-img-top</code> class. We’ve added the <code class="highlighter-rouge">.d-flex .flex-column</code> classes to the <code class="highlighter-rouge">.card-body</code> to have the author details be on the bottom of the card.</p>
                                <div class="example example-bg">
                                    <div class="example-column example-column-1">
                                        <div class="card">
                                            <a href="#"><img class="card-img-top" src="../../assets/images/gallery/1.jpg" alt="And this isn&#39;t my nose. This is a false one." /></a>
                                            <div class="card-body d-flex flex-column">
                                                <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
                                                <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
                                                <div class="d-flex align-items-center pt-5 mt-auto">
                                                    <img class="avatar avatar-md mr-3" src="../../assets/images/xs/avatar4.jpg" alt="avatar">
                                                    <div>
                                                        <a href="#">Rose Bradley</a>
                                                        <small class="d-block text-muted">3 days ago</small>
                                                    </div>
                                                    <div class="ml-auto text-muted">
                                                        <a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"../../assets/images/gallery/1.jpg"</span> <span class="na">alt=</span><span class="s">"And this isn&amp;#39;t my nose. This is a false one."</span><span class="nt">&gt;&lt;/a&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h4&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>And this isn't my nose. This is a false one.<span class="nt">&lt;/a&gt;&lt;/h4&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"avatar avatar-md mr-3"</span> <span class="na">src=</span><span class="s">"../../assets/images/xs/avatar4.jpg"</span><span class="nt">/></span>
        <span class="nt">&lt;div&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="nt">&gt;</span>Rose Bradley<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto text-muted"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"icon d-none d-md-inline-block ml-3"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-heart mr-1"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Row deck</h3>
                            </div>
                            <div class="card-body">
                                <p>If you want to create a couple of posts next to each other, add the <code class="highlighter-rouge">.row-deck</code> class to <code class="highlighter-rouge">.row</code>—then they will all have the same height.</p>
                                <div class="example example-bg">
                                    <div class="example-column example-column-2">
                                        <div class="row row-cards row-deck">
                                            <div class="col-md-4">
                                                <div class="card">
                                                    <div class="card-body">Short content</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="card">
                                                    <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="card">
                                                    <div class="card-body">Short content</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Post card with aside image</h3>
                            </div>
                            <div class="card-body">
                                <p>You can also add the image on the left side of the card. All you need do to is: add the <code class="highlighter-rouge">.card-aside</code> class to the element with the <code class="highlighter-rouge">.card</code> class. Then add the image in the <code class="highlighter-rouge">.card-aside-column</code> element. No worries, puffinwill automatically center it and scale to right size:</p>
                                <div class="example example-bg">
                                    <div class="example-column example-column-2">
                                        <div class="card card-aside">
                                            <a href="#" class="card-aside-column" style="background-image: url(../../assets/images/gallery/2.jpg)"></a>
                                            <div class="card-body d-flex flex-column">
                                                <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
                                                <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
                                                <div class="d-flex align-items-center pt-5 mt-auto">
                                                    <img class="avatar avatar-md mr-3" src="../../assets/images/xs/avatar2.jpg" alt="avatar">
                                                    <div>
                                                        <a href="#">Rose Bradley</a>
                                                        <small class="d-block text-muted">3 days ago</small>
                                                    </div>
                                                    <div class="ml-auto text-red">
                                                        <a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-aside"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-aside-column"</span> <span class="na">style=</span><span class="s">"background-image: url(../../assets/images/gallery/2.jpg)"</span><span class="nt">&gt;&lt;/a&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h4&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>And this isn't my nose. This is a false one.<span class="nt">&lt;/a&gt;&lt;/h4&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-5 mt-auto"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"avatar avatar-md mr-3"</span> <span class="na">src=</span><span class="s">"../../assets/images/xs/avatar4.jpg"</span><span class="nt">/></span>
            <span class="nt">&lt;div&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="nt">&gt;</span>Rose Bradley<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/small&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto text-red"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"icon d-none d-md-inline-block ml-3"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fe fe-heart mr-1"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Color variations</h3>
                            </div>
                            <div class="card-body">
                                <div class="example example-bg">
                                    <div class="example-column example-column-2">
                                        <div class="row row-cards row-deck">
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-status bg-purple"></div>
                                                    <div class="card-header">
                                                        <h3 class="card-title">Card status</h3>
                                                    </div>
                                                    <div class="card-body">
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-status card-status-left bg-blue"></div>
                                                    <div class="card-header">
                                                        <h3 class="card-title">Card status on left side</h3>
                                                    </div>
                                                    <div class="card-body">
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-cards row-deck"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-status bg-purple"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card status<span class="nt">&lt;/h3&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-status card-status-left bg-blue"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card status on left side<span class="nt">&lt;/h3&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Card with switch</h3>
                            </div>
                            <div class="card-body">
                                <div class="example example-bg">
                                    <div class="example-column example-column-1">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Card with switch</h3>
                                                <div class="card-options">
                                                    <label class="custom-switch m-0">
                                                        <input type="checkbox" value="1" class="custom-switch-input" checked="" />
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with switch<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-options"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-switch m-0"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"custom-switch-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"custom-switch-indicator"</span><span class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Card with loader</h3>
                            </div>
                            <div class="card-body">
                                <div class="example example-bg">
                                    <div class="example-column example-column-1">
                                        <div class="card">
                                            <div class="card-header">
                                                <h3 class="card-title">Card with loader</h3>
                                            </div>
                                            <div class="card-body">
                                                <div class="dimmer active">
                                                    <div class="loader"></div>
                                                    <div class="dimmer-content">
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with loader<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dimmer active"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"loader"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dimmer-content"</span><span class="nt">&gt;</span>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Start page footer -->
        <div class="section-body">
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            Copyright © 2019 <a href="https://themeforest.net/user/puffintheme">PuffinTheme</a>.
                        </div>
                        <div class="col-md-6 col-sm-12 text-md-right">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item"><a href="https://themeforest.net/user/puffintheme/portfolio">Portfolio</a></li>
                                <li class="list-inline-item"><a href="javascript:void(0)">FAQ</a></li>
                                <li class="list-inline-item"><a href="javascript:void(0)" class="btn btn-outline-primary btn-sm">Buy Now</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>

<!-- jQuery and bootstrtap js -->
<script src="../../assets/bundles/lib.vendor.bundle.js"></script>

<!-- start plugin js file  -->
<!-- Start core js and page js -->
<script src="../../assets/js/core.js"></script>
</body>
</html>